<template>
  <el-watermark :content="['风伯']">
    <div class="background-color">
      <!--搜索栏-->
      <el-card class="material-manager">
        <el-form :model="supplierSelect" inline="true" class="search-form" label-width="100px">
          <el-form-item label="供应商编码">
            <el-input v-model="supplierSelect.Code" placeholder="请输入供应商编码" class="wi-185px" />
          </el-form-item>

          <el-form-item label="供应商名称">
            <el-input v-model="supplierSelect.Name" placeholder="请输入供应商名称" class="wi-185px" />
          </el-form-item>

          <el-form-item label="邀约状态">
            <el-select v-model="supplierSelect.Status" placeholder="请选择邀约状态" class="wi-185px">
              <el-option label="待确认" value="等待" />
              <el-option label="已关联" value="关联" />
              <el-option label="已拒绝" value="拒绝" />
            </el-select>
          </el-form-item>
        </el-form>

        <el-form-item style="float: right; margin-top: 10px">
          <el-button type="success" @click="fetchData">查询</el-button>
          <el-button @click="reload">重置</el-button>
        </el-form-item>
      </el-card>
      <!--订单列表-->
      <el-card class="material-foot">
        <el-form-item style="float: right; margin-top: 10px">
          <el-button type="success" @click="searchMaterials">新增</el-button>
          <el-button @click="opendialogVisible">导入</el-button>
          <el-button>供应商配置</el-button>
          <el-button :disabled="selections.length > 1 || selections.length == 0" @click="resetSearch">编辑</el-button>
          <el-button :disabled="selections.length == 0" @click="deleteRow">删除</el-button>
        </el-form-item>
        <el-table
          height="400"
          :header-row-style="{ height: '50px' }"
          :data="supplierData"
          style="width: 100%"
          stripe
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" prop="id" />
          <el-table-column prop="Code" label="供应商编码" style="font-weight: bolder" fixed />
          <el-table-column prop="supplierName" label="供应商名称" fixed>
            <template #default="scope">
              <el-link type="success" @click="showSupplierInfo(scope.row)">{{ scope.row.Name }}</el-link>
            </template>
          </el-table-column>
          <el-table-column prop="Address" label="地址" show-overflow-tooltip />
          <el-table-column prop="Status" label="邀约状态" />
          <el-table-column prop="Num" label="企业号" />
          <el-table-column prop="UnifiedCreditCode" label="统一信用代码" />
          <el-table-column prop="language" label="语言" />
          <el-table-column prop="Phone" label="电话" />
          <el-table-column prop="fax" label="传真" />
          <el-table-column prop="Email" label="邮箱" />
          <el-table-column prop="addNum" label="增值税登记号" />
          <el-table-column prop="zipCode" label="邮编" />
        </el-table>
        <div style="display: flex; justify-content: space-between; flex: 1">
          <div style="flex: 1" />
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 30, 40]"
            :size="size"
            style="margin-top: 20px; margin-left: auto"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-card>
      <!--新增、编辑供应商弹窗-->
      <el-dialog
        v-model="creatematerial"
        :title="isEditing ? '修改供应商信息' : '添加供应商信息'"
        :before-close="handleClose"
      >
        <el-form ref="supplierRef" label-width="110px" inline="true" :model="supplierForm">
          <el-form-item
            label="ERP编码"
            prop="erpCode"
            :rules="[{ required: true, message: 'ERP编码不能为空', trigger: 'blur' }]"
          >
            <el-input
              v-model="supplierForm.erpCode"
              placeholder="请输入ERP编码"
              class="wi-185px"
              :disabled="isEditing ? true : false"
            />
          </el-form-item>
          <el-form-item
            label="供应商名称"
            prop="supplierName"
            :rules="[{ required: true, message: '供应商名称不能为空', trigger: 'blur' }]"
          >
            <el-input
              v-model="supplierForm.supplierName"
              placeholder="请输入供应商名称"
              class="wi-185px"
              minlength="0"
              maxlength="64"
              show-word-limit
            />
          </el-form-item>
          <el-form-item
            label="电话"
            prop="phone"
            :rules="[{ required: true, message: '电话不能为空', trigger: 'blur' }]"
          >
            <el-input
              v-model="supplierForm.phone"
              placeholder="请输入电话"
              class="wi-185px"
              minlength="0"
              maxlength="20"
              show-word-limit
            />
          </el-form-item>
          <el-form-item
            label="增值税登记号"
            prop="vatRegistrationNumber"
            :rules="[{ required: true, message: '增值税登记号不能为空', trigger: 'blur' }]"
          >
            <el-input
              v-model="supplierForm.vatRegistrationNumber"
              placeholder="请输入增值税登记号"
              class="wi-185px"
              minlength="0"
              maxlength="50"
              show-word-limit
            />
          </el-form-item>
          <el-form-item
            label="国家"
            prop="country"
            :rules="[{ required: true, message: '国家不能为空', trigger: 'change' }]"
          >
            <el-select v-model="supplierForm.country" placeholder="请选择国家" clearable class="wi-185px">
              <el-option label="中国" value="中国" />
            </el-select>
          </el-form-item>
          <el-form-item label="省" prop="province">
            <el-select
              v-model="supplierForm.province"
              placeholder="请选择省"
              clearable
              class="wi-185px"
              @change="handleProvinceSelect"
            >
              <el-option v-for="(item, index) in regionData" :key="index" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="城市" prop="city">
            <el-select v-model="supplierForm.city" placeholder="请选择城市" clearable class="wi-185px">
              <el-option v-for="(item, index) in cityList" :key="index" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="街道门牌" prop="address">
            <el-input
              v-model="supplierForm.streetSign"
              placeholder="请输入街道门牌"
              class="wi-185px"
              minlength="0"
              maxlength="64"
              show-word-limit
            />
          </el-form-item>
          <el-form-item label="语言" prop="language">
            <el-select v-model="supplierForm.language" placeholder="请输入语言" clearable class="wi-185px">
              <el-option label="汉语" value="汉语" />
            </el-select>
          </el-form-item>
          <el-form-item label="传真" prop="fax">
            <el-input
              v-model="supplierForm.fax"
              placeholder="请输入传真"
              class="wi-185px"
              minlength="0"
              maxlength="50"
              show-word-limit
            />
          </el-form-item>
          <el-form-item label="邮编" prop="postalCode">
            <el-input
              v-model="supplierForm.postcode"
              placeholder="请输入邮编"
              class="wi-185px"
              minlength="0"
              maxlength="50"
              show-word-limit
            />
          </el-form-item>
          <el-form-item label="网址" prop="website">
            <el-input
              v-model="supplierForm.website"
              placeholder="请输入网址"
              class="wi-185px"
              minlength="0"
              maxlength="50"
              show-word-limit
            />
          </el-form-item>
          <el-form-item label="账号组" prop="accountGroup">
            <el-input
              v-model="supplierForm.accountGroup"
              placeholder="请输入账号组"
              class="wi-185px"
              minlength="0"
              maxlength="50"
              show-word-limit
            />
          </el-form-item>
          <el-form-item label="备注" prop="notes">
            <el-input
              v-model="supplierForm.headerDescription"
              placeholder="请输入备注"
              autosize
              class="wi-185px"
              minlength="0"
              maxlength="50"
              show-word-limit
              type="textarea"
            />
          </el-form-item>
        </el-form>

        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
          <el-tab-pane label="联系人信息" name="first">
            <el-button icon="Plus" @click="addContact">添加一行</el-button>
            <el-table :data="supplierForm.contacts" style="margin: 20px 0" border>
              <el-table-column prop="code" label="项目" width="50" type="index" fixed />
              <el-table-column prop="name" label="姓名" width="150">
                <template #default="{ row }">
                  <el-input v-model="row.name" placeholder="请输入姓名" />
                </template>
              </el-table-column>
              <el-table-column prop="phone" label="电话" width="180">
                <template #default="{ row }">
                  <el-input v-model="row.phone" placeholder="请输入电话" />
                </template>
              </el-table-column>
              <el-table-column prop="mobile" label="手机" width="180">
                <template #default="{ row }">
                  <el-input v-model="row.mobile" placeholder="请输入手机" />
                </template>
              </el-table-column>
              <el-table-column prop="email" label="邮箱" width="180">
                <template #default="{ row }">
                  <el-input v-model="row.email" placeholder="请输入邮箱" />
                </template>
              </el-table-column>
              <el-table-column prop="notes" label="备注" width="180">
                <template #default="{ row }">
                  <el-input v-model="row.notes" placeholder="请输入备注" />
                </template>
              </el-table-column>
              <el-table-column label="操作" width="100">
                <template #default="{ $index }">
                  <el-button type="success" link icon="el-icon-delete" @click="removeContact($index)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>

          <el-tab-pane label="银行信息" name="second">
            <el-form ref="" :model="supplierForm" label-width="120px" label-position="right">
              <el-button type="primary" @click="addBankAccount">添加一行</el-button>
              <el-table :data="supplierForm.bankAccounts" style="width: 100%">
                <el-table-column prop="accountName" label="账户名称" width="180">
                  <template #default="{ row }">
                    <el-input v-model="row.accountName" placeholder="请输入账户名称" />
                  </template>
                </el-table-column>
                <el-table-column prop="accountNumber" label="账号" width="180">
                  <template #default="{ row }">
                    <el-input v-model="row.accountNumber" placeholder="请输入账号" />
                  </template>
                </el-table-column>
                <el-table-column prop="bankName" label="银行名称" width="180">
                  <template #default="{ row }">
                    <el-input v-model="row.bankName" placeholder="请输入银行名称" />
                  </template>
                </el-table-column>
                <el-table-column prop="branch" label="分行" width="180">
                  <template #default="{ row }">
                    <el-input v-model="row.branch" placeholder="请输入分行" />
                  </template>
                </el-table-column>
                <el-table-column prop="swiftCode" label="SWIFT码" width="180">
                  <template #default="{ row }">
                    <el-input v-model="row.swiftCode" placeholder="请输入SWIFT码" />
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="100">
                  <template #default="{ $index }">
                    <el-button type="success" link icon="el-icon-delete" @click="removeBankAccount($index)">
                      删除
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-form>
          </el-tab-pane>
        </el-tabs>
        <el-row>
          <el-col :span="8" :offset="18">
            <div>
              <el-button @click="resetForm">取消</el-button>
              <el-button type="success" @click="isEditing ? changeForm() : submitForm()">
                {{ isEditing ? '提交编辑' : '提交新增' }}
              </el-button>
            </div>
          </el-col>
        </el-row>
      </el-dialog>

      <!-- 供应商信息弹窗 -->
      <el-dialog v-model="showdialog" :column="2">
        <el-card>
          <template #header>
            <div class="card-header">
              <svg t="1729070527100" class="icon" viewBox="0 0 1024 1024" version="1.1" p-id="10234" width="30">
                <path d="M389.03333333 0H676.33333333v1023.9H389.03333333z" fill="#39900f" p-id="10235" />
              </svg>
              <span style="font-weight: 600; font-size: 20px">基本信息</span>
            </div>
          </template>
          <el-descriptions :data="supplierForm">
            <el-descriptions-item label="供应商编码：">{{ supplierForm.erpCode }}</el-descriptions-item>
            <el-descriptions-item label="供应商名称：">{{ supplierForm.supplierName }}</el-descriptions-item>
            <el-descriptions-item label="租户编码：">{{ supplierForm.refTenantId }}</el-descriptions-item>
            <el-descriptions-item label="电话：">{{ supplierForm.phone }}</el-descriptions-item>
            <el-descriptions-item label="ERP编码：">{{ supplierForm.erpCode }}</el-descriptions-item>
            <el-descriptions-item label="增值税登记号：">{{ supplierForm.vatRegistrationNumber }}</el-descriptions-item>
            <el-descriptions-item label="传真：">{{ supplierForm.fax }}</el-descriptions-item>
            <el-descriptions-item label="国家：">{{ supplierForm.country }}</el-descriptions-item>

            <el-descriptions-item label="省份：">{{ supplierForm.province }}</el-descriptions-item>
            <el-descriptions-item label="城市：">{{ supplierForm.city }}</el-descriptions-item>
            <el-descriptions-item label="街道门牌：">{{ supplierForm.streetSign }}</el-descriptions-item>
            <el-descriptions-item label="语言：">{{ supplierForm.language }}</el-descriptions-item>
            <el-descriptions-item label="邮编：">{{ supplierForm.postcode }}</el-descriptions-item>
            <el-descriptions-item label="网址：">{{ supplierForm.website }}</el-descriptions-item>
            <el-descriptions-item label="账号组：">{{ supplierForm.accountGroup }}</el-descriptions-item>
            <el-descriptions-item label="备注：">{{ supplierForm.headerDescription }}</el-descriptions-item>
            <el-descriptions-item label="创建人：">{{ supplierForm.createBy }}</el-descriptions-item>
            <el-descriptions-item label="创建时间：">{{ supplierForm.createTime }}</el-descriptions-item>
            <el-descriptions-item label="修改人：">{{ supplierForm.updateBy }}</el-descriptions-item>
            <el-descriptions-item label="修改时间：">{{ supplierForm.updateTime }}</el-descriptions-item>
          </el-descriptions>
        </el-card>
        <el-card style="margin-top: 20px" title="明细信息">
          <template #header>
            <div>
              <svg t="1729070527100" class="icon" viewBox="0 0 1024 1024" version="1.1" p-id="10234" width="30">
                <path d="M389.03333333 0H676.33333333v1023.9H389.03333333z" fill="#39900f" p-id="10235" />
              </svg>
              <span style="font-weight: 600; font-size: 20px">明细信息</span>
            </div>
          </template>
          <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="联系人信息" name="first">
              <el-table :data="supplierForm.contacts" border :header-row-style="{ color: 'gray' }">
                <el-table-column prop="name" label="姓名" width="150" />
                <el-table-column prop="phone" label="电话" width="180" />
                <el-table-column prop="mobile" label="手机" width="180" />
                <el-table-column prop="email" label="邮箱" width="180" />
                <el-table-column prop="notes" label="备注" width="180" />
              </el-table>
            </el-tab-pane>

            <el-tab-pane label="银行信息" name="second">
              <el-table :data="supplierForm.bankAccounts" border>
                <el-table-column prop="accountName" label="账户名称" />
                <el-table-column prop="accountNumber" label="账号" width="180" />
                <el-table-column prop="bankName" label="银行名称" width="180" />
                <el-table-column prop="branch" label="分行" width="180" />
                <el-table-column prop="swiftCode" label="SWIFT码" width="180" />
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-dialog>

      <!--导入-->
      <el-dialog v-model="dialogVisible" title="供应商导入" width="800" :before-close="handleClose">
        <el-upload
          ref="uploadRef"
          class="upload-demo"
          drag
          action="http://192.168.100.179:9097/admin/supplier/import"
          multiple
          accept=".xlsx"
          :auto-upload="false"
        >
          <div class="el-upload__text">
            将文件拖到此处，或
            <em>点击上传</em>
          </div>
          <template #tip>
            <div style="text-align: center">
              仅允许导入xlsx格式文件。
              <el-button :key="'primary'" :type="'primary'" link @click="downloadTemplate">下载模板</el-button>
            </div>
            <el-form-item style="margin-left: 80%">
              <el-button type="success" @click="update">确认</el-button>
              <el-button @click="resetForm">取消</el-button>
            </el-form-item>
          </template>
        </el-upload>
      </el-dialog>
    </div>
  </el-watermark>
</template>
    




<script setup lang='ts'>
import axios from 'axios'
import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'
import { regionData, CodeToText } from 'element-china-area-data'
//组件列表
const supplierSelect = reactive({
  Name: '',
  Status: '',
  Code: ''
})

const supplierForm = reactive({
  supplierName: '',
  refTenantId: '',
  phone: '',
  erpCode: '',
  vatRegistrationNumber: '',
  fax: '',
  country: '',
  city: '',
  province: '',
  streetSign: '',
  language: '',
  postcode: '',
  website: '',
  accountGroup: '',
  headerDescription: '',
  createBy: '',
  createTime: '',
  updateBy: '',
  updateTime: '',

  contacts: [{ name: '', phone: '', mobile: '', email: '', notes: '' }],
  bankAccounts: [
    {
      accountName: '',
      accountNumber: '',
      bankName: '',
      branch: '',
      swiftCode: ''
    }
  ]
})

const isEditing = ref()
const creatematerial = ref(false)
const activeName = ref('first')
const handleClick = () => {}

//添加一行
const addContact = () => {
  supplierForm.contacts.push({ name: '', phone: '', mobile: '', email: '', notes: '' })
}
const addBankAccount = () => {
  supplierForm.bankAccounts.push({
    accountName: '',
    accountNumber: '',
    bankName: '',
    branch: '',
    swiftCode: ''
  })
}

//存放数据
const supplierData = ref([])

//数据显示.查询
const fetchData = async () => {
  try {
    const response = await axios.post('http://192.168.100.179:9097/admin/supplier/querySupplierPage', {
      current: currentPage.value,
      size: pageSize.value,
      records: [
        {
          erpCode: supplierSelect.Code,
          supplierName: supplierSelect.Name,
          tenantState: supplierSelect.Status
        }
      ]
    })
    const result = response.data
    supplierData.value = result.data.records.map((item) => {
      return {
        id: item.id,
        Code: item.erpCode,
        Name: item.supplierName,
        Address: item.country + item.province + item.city + item.streetSign,
        Status: item.tenantState,
        Num: item.tenantId,
        UnifiedCreditCode: item.creditCode,
        language: item.language,
        Phone: item.phone,
        fax: item.fax,
        Email: item.email,
        addNum: item.vatRegistrationNumber,
        zipCode: item.postcode
      }
    })
    total.value = result.data.total
  } catch (error) {
    console.error('获取数据失败:', error)
  }
}
onMounted(() => {
  fetchData()
  console.log(cityList)
})

//分页
import { type ComputedRef, reactive, ref } from 'vue'
const currentPage = ref(1)
const pageSize = ref(10) //每页几条
const size = ref(10)
const total = ref(0)
const selections = ref<any[]>([])

const handleSizeChange = (page) => {
  pageSize.value = page
  fetchData()
}

const handleCurrentChange = (size) => {
  currentPage.value = size
  fetchData()
}

//新增表格
const searchMaterials = () => {
  ;(isEditing.value = false), (creatematerial.value = true)
}

//删除接口
const deleteRow = async () => {
  try {
    const deleteinfo = selections.value.map((id) =>
      axios({
        method: 'delete',
        url: 'http://192.168.100.179:9097/admin/supplier/deleteSupplier',
        data: {
          id: id.id
        }
      })
    )
    const results = await Promise.all(deleteinfo)
    results.forEach((result) => {
      if (result.data.code == 0) {
        ElNotification({
          title: 'Success',
          message: '删除成功',
          type: 'success'
        })
        fetchData()
      } else {
        console.error(` 删除ID: ${result.data.id}信息失败`)
      }
    })
  } catch (error) {
    console.error('删除数据失败:', error)
  }
}

const removeContact = (index: number) => {
  supplierForm.contacts.splice(index, 1)
}

const removeBankAccount = (index: number) => {}
//关闭弹窗
const handleClose = (done: () => void) => {
  ElMessageBox.confirm('确定要关闭这个弹窗吗?')
    .then(() => {
      done()
      resetFields()
    })
    .catch(() => {
      // catch error
    })
}
//提交添加表单
const currentTime = ref(new Date().toISOString())
const supplierRef = ref()
const submitForm = async () => {
  await supplierRef.value.validate((valid) => {
    if (valid) {
      console.log('表单校验成功')
      ElMessage.success('表单提交成功')
      try {
        axios.post('http://192.168.100.179:9097/admin/supplier/addSupplier', {
          supplierName: supplierForm.supplierName,
          phone: supplierForm.phone,
          vatRegistrationNumber: supplierForm.vatRegistrationNumber,
          country: supplierForm.country,
          province: supplierForm.province,
          city: supplierForm.city,
          streetSign: supplierForm.streetSign,
          language: supplierForm.language,
          fax: supplierForm.fax,
          postcode: supplierForm.postcode,
          website: supplierForm.website,
          accountGroup: supplierForm.accountGroup,
          headerDescription: supplierForm.headerDescription,
          createBy: ''
        })
        creatematerial.value = false
        resetFields()
      } catch (error) {
        console.error('添加数据失败:', error)
      }
    } else {
      ElMessage.error('表单校验失败')
    }
  })
}
//表格选中
const handleSelectionChange = (newSelection: any) => {
  selections.value = newSelection
}

//编辑表单
const changeForm = async () => {
  await supplierRef.value.validate((valid) => {
    if (valid) {
      console.log('表单校验成功')
      ElMessage.success('表单提交成功')
      try {
        axios.put('http://192.168.100.179:9097/admin/supplier/updateSupplier', {
          id: selections.value[0].id,
          erpCode: supplierForm.erpCode,
          phone: supplierForm.phone,
          country: supplierForm.country,
          city: supplierForm.city,
          province: supplierForm.province,
          language: supplierForm.language,
          postode: supplierForm.postcode,
          accountGroup: supplierForm.accountGroup,
          supplierName: supplierForm.supplierName,
          vatRegistrationNumber: supplierForm.vatRegistrationNumber,
          streetSign: supplierForm.streetSign,
          fax: supplierForm.fax,
          website: supplierForm.website,
          headerDescription: supplierForm.headerDescription,
          updateBy: ''
        })

        creatematerial.value = false
        fetchData()
      } catch (error) {
        console.error('编辑数据失败:', error)
      }
    } else {
      ElMessage.error('表单校验失败')
    }
  })
}
//取消按键
const resetForm = () => {
  resetFields
  creatematerial.value = false
  uploadRef.value!.clearFiles()
  dialogVisible.value = false
}
//重置
const resetFields = () => {
  Object.assign(supplierForm, {
    erpCode: '',
    phone: '',
    country: '',
    city: '',
    province: '',
    language: '',
    postcode: '',
    accountGroup: '',
    supplierName: '',
    vatRegistrationNumber: '',
    streetSign: '',
    fax: '',
    website: '',
    notes: ''
  })
}
//导入
const dialogVisible = ref(false)
const opendialogVisible = () => {
  dialogVisible.value = true
}
import type { UploadInstance } from 'element-plus'
import moment from 'moment-mini'
const uploadRef = ref<UploadInstance>()
const update = () => {
  uploadRef.value!.submit()
}
const downloadTemplate = async () => {
  try {
    const data: any = 'http://192.168.100.179:9097/admin/supplier/export'
    location.href = data
  } catch (error) {
    console.error('下载模板失败：', error)
  }
}
//打开编辑
const resetSearch = async () => {
  creatematerial.value = true
  isEditing.value = true
  try {
    const response = await axios.post('http://192.168.100.179:9097/admin/supplier/querySupplierPage', {
      records: [
        {
          id: selections.value[0].id,
          current: 1,
          size: 1
        }
      ]
    })
    const result = response.data.data.records
    const obj = {}
    for (const item of result) {
      obj[item.id] = item
    }
    Object.assign(supplierForm, obj[selections.value[0].id])
  } catch (error) {
    console.error('获取数据失败:', error)
  }
}
//详情
const showdialog = ref(false)
const showSupplierInfo = async (supplier) => {
  showdialog.value = true
  try {
    const response = await axios.post('http://192.168.100.179:9097/admin/supplier/querySupplierPage', {
      records: [{ id: supplier.id, current: 1, size: 1 }]
    })
    const result = response.data.data.records
    const obj = {}
    for (const item of result) {
      obj[item.id] = item
    }
    Object.assign(supplierForm, obj[supplier.id])
    const formattedTime = moment(supplierForm.updateTime).format('YYYY-MM-DD HH:mm:ss')
    console.log(formattedTime)

    supplierForm.updateTime = formattedTime
    console.log(supplierForm.updateTime)
  } catch (error) {
    console.error('添加数据失败:', error)
  }
}
//重置
const reload = () => {
  supplierSelect
}
//切换城市
const handleProvinceSelect = () => {
  supplierForm.city = ''
}
//二三级城市列表
interface AreaList {
  value: string
  label: string
  children?: AreaList[]
}
const cityList: ComputedRef<AreaList[]> = computed((): AreaList[] => {
  if (!supplierForm.province) {
    return []
  }
  let temp = regionData.find((item: any) => {
    return item.value == supplierForm.province
  })
  return temp.children ? temp.children : []
})
</script>
    
  <style>
.material-manager {
  width: 100%;
}

.material-foot {
  margin-top: 20px;
}
.el-table:not(.el-table--border) .el-table__cell {
  border-right: none;
  font-size: 15px;
}

.el-pagination.is-background .el-pager li:not(.disabled) {
  background-color: #fff;
  color: #666;
}

.el-pagination.is-background .el-pager li:not(.disabled):hover {
  background-color: #e6e6e6;
}

.el-pagination.is-background .el-pager li:not(.disabled).is-active {
  background-color: #67c23a;
  color: #fff;
}
</style>